import React from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { Button, Tag } from 'antd'
import { history } from 'umi'
import ProTable from '@ant-design/pro-table'
import { list, del as deleted, setDefault } from '@/services/freight/api'

const Freight = () => {
  //删除
  const del = (record, action) => {
    deleted(record).then(data => {
      action.reload()
    })
  }

  const setDef = (record, action) => {
    setDefault({default_freight_temp:record.id}).then(data => {
      action.reload()
    })
  }

  const columns = [
    {
      title: '模版名称',
      dataIndex: 'name',
    },
    {
      align: 'center',
      title: '被使用的商品数',
      dataIndex: 'sales_volume',
    },
    {
      title: '是否默认',
      search: false,
      dataIndex: 'is_default',
      render: (text, record, index, action) => {
        return text ? (
          <Tag color='orange'>默认模版</Tag>
        ) : (
          <a onClick={() => setDef(record, action)}>设置默认</a>
        )
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
    },
    {
      title: '操作',
      width: 50,
      key: 'option',
      valueType: 'option',
      render: (text, record, index, action) => [
        <Button type="link" onClick={() => history.push({
          pathname: '/product/freight/edit',
          query: {
            id: record.id,
          },
        })}>编辑</Button>,
        <Button type="link" danger onClick={() => del(record, action)}>
          删除
        </Button>,
      ],
    },
  ]

  return (
    <PageContainer ghost={true}>
      <ProTable
        columns={columns}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params,
          sort,
          filter,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const msg = await list({
            page: params.current,
            pageSize: params.pageSize,
          })
          return {
            data: msg.data.content,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.data.total_elements,
          }
        }}
        rowKey='key'
        pagination={{
          defaultPageSize: 10,
          showQuickJumper: true,
        }}
        search={{
          layout: 'vertical',
          defaultCollapsed: false,
        }}
        dateFormatter='string'
        // toolbar={{
        //   title: '高级表格',
        //   tooltip: '这是一个标题提示',
        // }}
        toolBarRender={() => [
          <Button
            type='primary'
            key='primary'
            onClick={event => history.push('/product/freight/add')}
          >
            创建模版
          </Button>,
        ]}
      />
    </PageContainer>
  )
}

export default Freight
